<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg_red{
            background: red;
        }
        .bg_green{
            background: green;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <!--视图-->
    <div id="hello">
        <h1>{{msg}}</h1>
        <input type="text" v-model="msg">
        <table border="1px" width="400px">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr v-for="person in persons" v-bind:class="person.gender=='男'?'bg_red':'bg_green'"
                v-on:click="clickMe(person)">
                <td>{{person.id}}</td>
                <td>{{person.name}}</td>
                <td>{{person.gender}}</td>
                <td>{{person.age}}</td>
            </tr>
        </table>
        <input type="text" v-model="current.id"><br>
        <input type="text" v-model="current.name"><br>
        <input type="text" v-model="current.gender"><br>
        <input type="text" v-model="current.age"><br>
        <input type="button" value="save" v-on:click="addPerson">
    </div>
    <script>
        //数组数据
        let persons = [
            {id:1,name:"张三",gender:"男",age:20},
            {id:2,name:"李三",gender:"女",age:15},
            {id:3,name:"王三",gender:"男",age:20},
            {id:4,name:"刘三",gender:"女",age:16}];
        /*Vue对象 ViewModel 视图模型*/
        new Vue({
            el:"#hello", //指定作用范围
            data:{       //指定数据 Model 模型
                msg:"hello Vue!!",
                persons: persons,   //所有人
                current: persons[0] //当前选择的人
            },
            methods:{    //定义方法
                clickMe:function(person){
                    this.current = person;
                },
                addPerson:function(){
                    //深复制对象
                    let per = JSON.parse(JSON.stringify(this.current));
                    //添加数据
                    this.persons.push(per);
                }
            }
        });
    </script>
</body>
</html>